<template>
	<el-card id="search-params" class="search-card">
		<el-form :model="searchParams" :rules="rules" :label-width="labelWidth" label-position="right" label-suffix=":" size="medium">
			<el-row>
				<form-element :colWidth="colWidth" :formItems="firstParams" :model="searchParams"
					@handle-change="handleChange" @handle-blur="handleBlur"></form-element>
			</el-row>
			<el-row>
				<form-element :colWidth="colWidth" :formItems="secondParams" :model="searchParams"
					@handle-change="handleChange" @handle-blur="handleBlur"></form-element>
				<el-col :push="(24 - colWidth - colWidth * secondParams.length)" :sm="colWidth">
					<el-button type="primary" class="button" @click="search()">查询</el-button>
					<el-button class="button" type="warning" @click="reset()">重置</el-button>
				</el-col>
			</el-row>
		</el-form>
	</el-card>
</template>

<script>
export default {
	name: "search-params",
	props: {
		firstParams: {
			type: Array,
			default() {
				return [];
			},
			validator: (value) => {
				return value.length <= 6;
			}
		},
		secondParams: {
			type: Array,
			default() {
				return [];
			},
			validator: (value) => {
				return value.length <= 5;
			}
		},
		rules: {
			type: Object,
			default() {
				return {};
			}
		},
		labelWidth: {
			type: String,
			default: "100px"
		},
		colWidth: {
			type: Number,
			default: 4
		}
	},
	data() {
		return {
			searchParams: {}
		};
	},
	methods: {
		search() {
			this.updateParams();
			this.$emit("handle-params", this.searchParams);
		},
		reset() {
			this.searchParams = {};
			this.$emit("handle-reset", {});
		},
		updateParams() {
			this.searchParams = this.resourceUtils.removeInvalid(this.searchParams);
		},
		handleChange(prop, form) {
			this.$emit("handle-change", prop, form);
		},
		handleBlur(prop, form) {
			this.$emit("handle-blur", prop, form);
		}
	}
};
</script>

<style scoped>
.button {
	width: 40%;
}

.search-card {
	height: 120px;
	padding-bottom: 5px;
	background-color: #F5F5F5;
}

.search-card >>> .el-card__body {
	padding: 10px;
}
</style>
